隐藏和显示网页上的元素是一项经常发生的与用户界面有关的任务。你可能想切换一些细节部分、工具提示等的可见性。

在这篇文章中，你将学习如何使用Vue提供的3种方法来隐藏网页上的元素:

v-if 是一个内置的Vue指令，接受布尔值。

html

v-if 处理显示/隐藏元素的方法如下。

A) 如果提供给v-if 的值是true （或者一般是一个真值），那么该元素就被插入到DOM中。

B) 否则，如果提供给v-if 的值是false （或者一般是一个假的值），那么该元素就不会被插入到DOM中。

让我们考虑下面的例子。

vue

当上述组件运行时，下面是插入到网页中的HTML内容。

html

第一个元素被渲染了，因为v-if="value1" ，提供了一个true 的值。然而，第二个元素并没有被渲染到DOM中，因为v-if="value2" 被提供了一个false 。

简单地说，v-if 指令允许你显示或隐藏元素，只需在DOM中插入或不插入该元素。非常简单。

当v-if 指令与false ，Vue也不会初始化元素上的事件监听器，即使你明确使用事件指令。

v-if 与 （在下一节介绍）相比，toggling的成本相对较高（因为每次你改变 的值，元素就会从DOM中插入/移出，同时事件监听器也会被初始化/取消初始化）。但如果元素最初是隐藏的，它的初始化成本很低。v-show v-if

你可以在那些不经常切换可见性并且最初是隐藏的元素上使用v-if 。例如，显示/隐藏一个有实体详细信息的部分。

挑战：如果用0 ，v-if 会呈现这个元素吗？那么'0' 呢？

通常情况下，保持元素在DOM中的存在，但使用CSS样式在视觉上隐藏它是很有用的。

v-show v-show是一个内置指令，可以在视觉上显示或隐藏该元素。

html

v-show 处理显示该元素的方法如下:

A) 如果提供给v-show 的值是true （或truthy），那么该元素是可见的。

B) 否则，如果提供给v-show 的值是false （或falsy），那么该元素被隐藏，但仍在DOM中被呈现。

让我们看一下下面的例子。

vue

当你运行上述组件时，两个元素都被渲染到DOM中。

html

第一个元素在屏幕上是可见的。然而，第二个元素是隐藏的，因为Vue应用了display: none inline style，这要感谢v-show="false" 。

display: none 应用于一个元素的内联样式使该元素完全消失。

挑战：你如何在Vue中实现一个按钮来切换一个元素的显示？请在评论中分享你的解决方案!

v-show，当与false ，应用display: none 内联样式，并在视觉上隐藏元素，几乎不对DOM进行修改。

因此，使用v-show 来切换元素的可见性是相对便宜的（与上面描述的v-if 相比），所以你可以对一个经常切换可见性的元素使用这个指令。

如果你需要隐藏元素的内容，同时保留它所占据的空间呢？隐藏元素内容但保留其空间的CSS样式是visibility: hidden 。

不幸的是，你不能使用v-show 指令，因为它只应用display: none 样式。

但一个可行的解决方案是使用:class 绑定，这在Vue中是相当灵活的。当对象字面意思{ className: boolValue } 被分配到:class ，如果boolValue 是true ，Vue会把"className" 作为一个类应用到元素上。

让我们创建一个具有visibility: hidden 样式的CSS类invisible 。然后，使用:class 绑定和一个对象字面，你可以将invisible 类应用于一个元素。

vue

打开演示，你会看到元素I'm visible和Dummy text，以及两者之间的一个空格--隐藏的第二个元素。

上面的例子渲染了HTML内容。

html

Only my space is visible! 将 类应用于该元素，因为 是 （我知道这里的否定词很让人困惑！）。invisible value2 false

请注意，你也可以通过使用opacity: 0 来隐藏该元素，甚至可以使用position: absolute; left: -9999px 将该元素偏移到视口之外。只要创建适当的CSS类，然后用:class 来切换它。

Vue给了你一堆好方法来隐藏屏幕上的元素。

当使用v-if="false" ，该元素在DOM中根本就没有被渲染。

当使用v-show="false" ，该元素在DOM中被渲染，然而，Vue应用了内联样式display: none ，完全隐藏了该元素。

另外，如果你想要更多的可见性定制，不要忘记强大的:class 绑定。

要隐藏元素但保持其空间，使用:class="{ invisible: !value }" 来指定invisible 类（该类有visibility: hidden 样式应用于它）。